<template>
    <div>
<!--      轮播图-->
      <van-swipe :height="180"  class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="m in images">
          <van-image width="100%"  fit="contain" :src="m"/>
        </van-swipe-item>
      </van-swipe>
<!--      轮播通知-->
      <van-notice-bar
        left-icon="volume-o"
        text="便宜啦！便宜啦！你想要的都便宜啦！"
      />
<!--      宫格-->
<!--      <van-grid :column-num="4">-->
<!--        <van-grid-item v-for="m in gongge" :icon="m" text="文字" />-->
<!--      </van-grid>-->

<!--      筛选-->
      <!--     吸顶配置 -->
      <van-sticky>
        <van-dropdown-menu>
          <van-dropdown-item @change="selByCondition" v-model="nowColor" :options="color" />
          <van-dropdown-item @change="selByCondition" v-model="nowType" :options="carType" />
        </van-dropdown-menu>
      </van-sticky>
<!--      商品卡片-->
      <van-card
        @click-thumb="gotoDetail(item.carId)"
        num="1"
        :price="item.rentprice"
        :desc="item.description"
        :title="item.name"
        :thumb="item.carimg"
        v-for="(item,index) in carList"
      >
        <template #tags>
          <van-tag plain type="danger">{{item.type}}</van-tag>
          <van-tag plain type="danger">{{item.color}}</van-tag>
        </template>
        <template #footer>
          <van-button size="mini" @click="cancleCollect(index,item.collectId)" v-if="!!item.collectId">已收藏</van-button>
          <van-button size="mini" @click="collect(index,item)" v-else>收藏</van-button>
          <!--<van-button size="mini">will</van-button>-->
        </template>
      </van-card>

      <index></index>
    </div>
</template>


<script>
  import Vue from 'vue';
  import { Lazyload } from 'vant';
  import { Swipe, SwipeItem } from 'vant';
  import { Image } from 'vant';
  import { Grid, GridItem } from 'vant';
  import { NoticeBar } from 'vant';
  import { Card } from 'vant';
  import { Button } from 'vant';
  import { Tag } from 'vant';
  import request from '@/utils/request'
  import { DropdownMenu, DropdownItem } from 'vant';
  import { Sticky } from 'vant';
  import Index from "./index/index";

  Vue.use(Sticky);
  Vue.use(DropdownMenu);
  Vue.use(DropdownItem);

  Vue.use(Tag);
  Vue.use(Button);
  Vue.use(Card);
  Vue.use(NoticeBar);

  Vue.use(Grid);
  Vue.use(GridItem);

  Vue.use(Lazyload);
  Vue.use(SwipeItem);
  Vue.use(Swipe);
  Vue.use(Image);
  export default {
    name: "Hello",
    components:{
      Index
    },
    data() {
      return {
        activeKey: 0,
        message: "点击就会改变值！",
        images: [
          require('@/assets/img/Carousel2.png'),
          require('@/assets/img/Carousel4.png'),
          require('@/assets/img/Carousel3.png')
        ],
        gongge: [
          require('@/assets/aili/biaoqing.png'),
          require('@/assets/aili/dunpai.png'),
          require('@/assets/aili/kapian-01.png'),
          require('@/assets/aili/paizhao.png'),
          // require('@/assets/aili/qiandao-01.png'),
          // require('@/assets/aili/songliwu-01.png'),
          // require('@/assets/aili/sousuofangjian-01.png'),
          // require('@/assets/aili/toutouzi-01.png')
        ],
        //以下是筛选使用的数据
        nowColor: '',
        nowType: '',
        color: [
          { text: '全部颜色', value: '' },
          { text: '黑色', value: '黑色' },
          { text: '白色', value: '白色' },
        ],
        carType: [
          { text: '全部车型', value: '' },
          { text: '轿车', value: '轿车' },
          { text: 'SUV', value: 'SUV' },
        ],
        carList:[]
      }
    },
    created() {
      request({
        url: '/car/queryAllCar',
        method: 'get'
      }).then(res => {
        this.carList = res
      });
    },
    methods:{
      selByCondition(value){   //根据条件筛选
        console.log("进入筛选函数"+value);
        request({
          url: '/car/queryCarByCondition?nowColor=' + this.nowColor + '&nowType=' + this.nowType,
          method: 'get'
        }).then(res => {
          this.carList = res
        });
      },
      gotoDetail(id) {
        //使用query携带参数到页面详细信息页
        console.log("车辆id:" + id);
        this.$router.push({path:'/carDetailPage',query:{carId:id}});
      },
      cancleCollect(index,collectId){
        request({
          url: '/collect/customer/collect',
          method: 'delete',
          data:{collectId:collectId}
        }).then(res => {
            this.carList[index].collectId = "";
        });
      },
      collect(index,item){
        request({
          url: '/collect/customer/collect',
          method: 'post',
          data:{
            carId:item.carId
          }
        }).then(res => {
          this.carList[index].collectId = res;
        });
      },
      onChange(index) {
        Notify({ type: 'primary', message: index });
      },
    }
  }


 </script>

<style scoped>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;

  }
</style>
